<template>
  <div class="input-area">
    <div class="input-wrapper">
      <el-input
        ref="textareaRef"
        v-model="inputText"
        type="textarea"
        :rows="mobile ? 3 : 4"
        :placeholder="loading ? 'AI 正在回复...' : '输入消息...'"
        :disabled="loading"
        @keydown="handleKeyDown"
        resize="none"
        class="input-textarea"
      />
      
      <div class="input-actions">
        <el-button
          v-if="hasError"
          text
          @click="handleRetry"
          :icon="Refresh"
          size="small"
        >
          重试
        </el-button>
        
        <el-button
          v-if="loading"
          text
          @click="handlePause"
          :icon="VideoPause"
          size="small"
        >
          暂停
        </el-button>
        
        <el-button
          type="primary"
          @click="handleSend"
          :loading="loading"
          :disabled="!canSend"
          :icon="Promotion"
        >
          发送
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { Promotion, Refresh, VideoPause } from '@element-plus/icons-vue'

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  hasError: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['send', 'retry', 'pause'])

const inputText = ref('')
const mobile = ref(false)
const textareaRef = ref(null)

// 检查是否可以发送
const canSend = computed(() => {
  return inputText.value.trim().length > 0 && !props.loading
})

// 检测移动端
const checkMobile = () => {
  mobile.value = window.innerWidth < 768
}

// 发送消息
const handleSend = () => {
  if (!canSend.value) return
  
  const text = inputText.value.trim()
  if (text) {
    emit('send', text)
    inputText.value = ''
  }
}

// 重试
const handleRetry = () => {
  emit('retry')
}

// 暂停
const handlePause = () => {
  emit('pause')
}

// 键盘事件处理
const handleKeyDown = (event) => {
  // Enter 发送，Shift+Enter 换行
  if (event.key === 'Enter' && !event.shiftKey) {
    event.preventDefault()
    handleSend()
  }
}

// 聚焦输入框
const focus = async () => {
  await nextTick()
  if (textareaRef.value) {
    // Element Plus 的 el-input 组件需要通过 textarea 元素来聚焦
    const textareaEl = textareaRef.value.$el?.querySelector('textarea') || textareaRef.value.$el
    if (textareaEl && typeof textareaEl.focus === 'function') {
      textareaEl.focus()
      // 将光标移到末尾
      if (textareaEl.setSelectionRange) {
        const length = inputText.value.length
        textareaEl.setSelectionRange(length, length)
      }
    }
  }
}

// 暴露方法给父组件
defineExpose({
  focus
})

onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile)
})
</script>

<style scoped>
.input-area {
  padding: 1rem 1.5rem;
  background: var(--el-bg-color);
  border-top: 1px solid var(--el-border-color-light);
  flex-shrink: 0;
}

.input-wrapper {
  max-width: 100%;
}

.input-textarea {
  margin-bottom: 0.75rem;
}

.input-textarea :deep(.el-textarea__inner) {
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  resize: none;
}

.input-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .input-area {
    padding: 0.75rem 1rem;
  }
  
  .input-textarea {
    margin-bottom: 0.5rem;
  }
  
  .input-textarea :deep(.el-textarea__inner) {
    font-size: 16px; /* 防止 iOS 缩放 */
  }
}
</style>

